<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Insert title here</title>

    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/static/assets/40-40.ico}"/>

    <link rel="stylesheet" th:href="@{//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" />
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Brand" th:src="@{/logo.png}"/>
                </a>
            </div>
        </div>
    </nav>
    <table class="table table-hover" style="border-collapse: 0">
        <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>email</th>
        </tr>
        </thead>
        <tr th:each="user : ${users.list}">
            <th th:text="${user.userId}"></th>
            <th th:text="${user.userName}"></th>
            <th th:text="${user.phone}"></th>
        </tr>
    </table>
    <div style="text-align:center">
        <!-- 处理页数小于7 的情况     -->
        <ul class="pagination" data-th-if="${users.pages lt 7}">
            <!-- 上一页 -->
            <li class="page-item" data-th-classappend="${users.isFirstPage} ? 'disabled' : ''">
                <a th:if="${not users.isFirstPage}" class="page-link" aria-label="Previous" th:href="@{${'/user/page'}(pageNum=${users.pageNum-1},pageSize=${users.pageSize})}">«</a>
            </li>

            <!-- 迭代生成页码 -->
            <li class="page-item" data-th-each="i : ${#numbers.sequence(1, users.pages)}" data-th-classappend="${(users.pageNum) eq i} ? 'active' : ''" >
                <a th:if="${users.pageNum eq i}" href="javascript:void(0);">
                    <span th:text="${i}"></span>
                </a>
                <a th:if="${not (users.pageNum eq i)}" th:href="@{${'/user/page'}(pageNum=${i},pageSize=${users.pageSize})}">
                    <span th:text="${i}"></span>
                </a>
            </li>

            <!-- 下一页 -->
            <li class="page-item" data-th-classappend="${users.isLastPage} ? 'disabled' : ''">
                <a th:if="${not users.isLastPage}" th:href="@{${'/user/page'}(pageNum=${users.pageNum+1},pageSize=${users.pageSize})}">»</a>
            </li>
        </ul>

        <!-- 处理页数等于7 的情况     -->
        <ul class="pagination" data-th-if="${users.pages eq 7}">
            <!-- 上一页 -->
            <li class="page-item" data-th-classappend="${users.isFirstPage} ? 'disabled' : ''">
                <a th:if="${not users.isFirstPage}" class="page-link" aria-label="Previous" th:href="@{${'/user/page'}(pageNum=${users.pageNum-1},pageSize=${users.pageSize})}">«</a>
            </li>

            <!-- 迭代生成页码 -->
            <li class="page-item" data-th-each="i : ${#numbers.sequence(1, users.pages)}" data-th-classappend="${(users.pageNum) eq i} ? 'active' : ''" >
                <a th:if="${users.pageNum eq i}" href="javascript:void(0);">
                    <span th:text="${i}"></span>
                </a>
                <a th:if="${not (users.pageNum eq i)}" th:href="@{${'/user/page'}(pageNum=${i},pageSize=${users.pageSize})}">
                    <span th:text="${i}"></span>
                </a>
            </li>

            <!-- 下一页 -->
            <li class="page-item" data-th-classappend="${users.isLastPage} ? 'disabled' : ''">
                <a th:if="${not users.isLastPage}" th:href="@{${'/user/page'}(pageNum=${users.pageNum+1},pageSize=${users.pageSize})}">»</a>
            </li>
        </ul>



        <!-- 处理页数大于7 的情况     -->
        <ul class="pagination" data-th-if="${users.pages gt 7}" >
            <!--  上一页 -->
            <li class="page-item" data-th-classappend="${users.isFirstPage} ? 'disabled' : ''">
                <a th:if="${not users.isFirstPage}" class="page-link" aria-label="Previous" th:href="@{${'/user/page'}(pageNum=${users.pageNum-1},pageSize=${users.pageSize})}">«</a>
            </li>

            <!--  首页 -->
            <li class="page-item" data-th-classappend="${(users.pageNum) eq 1} ? 'active' : ''" >
                <a class="page-link" aria-label="Previous" th:href="@{${'/user/page'}(pageNum=1,pageSize=${users.pageSize})}">1</a>
            </li>


            <!--   当前页面小于等于4 -->
            <li class="page-item" data-th-if="${(users.pageNum) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"   data-th-classappend="${(users.pageNum) eq i} ? 'active' : ''" >
                <a th:href="@{${'/user/page'}(pageNum=${i},pageSize=${users.pageSize})}">
                    <span th:text="${i}"></span>
                </a>
            </li>

            <li class="page-item disabled" data-th-if="${(users.pageNum) le 4}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <!--   最后一页与当前页面之差，小于等于3 -->
            <li class="page-item disabled" data-th-if="${(users.pages-(users.pageNum)) le 3}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li class="page-item" data-th-if="${(users.pages-(users.pageNum)) le 3}" data-th-each="i : ${#numbers.sequence(users.pages-4, users.pages-1)}"
                data-th-classappend="${(users.pageNum) eq i} ? 'active' : ''" >
                <a th:href="@{${'/user/page'}(pageNum=${i},pageSize=${users.pageSize})}">
                    <span th:text="${i}"></span>
                </a>
            </li>

            <!--   最后一页与当前页面之差大于3，且  当前页面大于4 -->

            <li class="page-item disabled" data-th-if="${((users.pageNum) gt 4) &amp;&amp; ((users.pages-(users.pageNum)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <li class="page-item" data-th-if="${((users.pageNum) gt 4) &amp;&amp; ((users.pages-(users.pageNum)) gt 3 )}">
                <a th:if="${not users.isFirstPage}" class="page-link" aria-label="Previous" th:href="@{${'/user/page'}(pageNum=${users.pageNum-1},pageSize=${users.pageSize})}"><span th:text="${users.pageNum-1}"></span></a>
            </li>

            <li class="page-item active" data-th-if="${((users.pageNum) gt 4) &amp;&amp; ((users.pages-(users.pageNum)) gt 3 )}" >
                <a th:if="${not users.isFirstPage}" class="page-link" th:href="@{${'/user/page'}(pageNum=${users.pageNum},pageSize=${users.pageSize})}"><span th:text="${users.pageNum}"></span></a>
            </li>

            <li class="page-item" data-th-if="${((users.pageNum) gt 4) &amp;&amp; ((users.pages-(users.pageNum)) gt 3 )}">
                <a th:if="${not users.isFirstPage}" class="page-link" aria-label="Previous" th:href="@{${'/user/page'}(pageNum=${users.pageNum+1},pageSize=${users.pageSize})}"><span th:text="${users.pageNum+1}"></span></a>
            </li>

            <li class="page-item disabled"  data-th-if="${((users.pageNum) gt 4) &amp;&amp; ((users.pages-(users.pageNum)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <!--   最后一页 -->
            <li class="page-item" data-th-classappend="${(users.pageNum) eq users.pages} ? 'active' : ''" >
                <a th:href="@{${'/user/page'}(pageNum=${users.pages},pageSize=${users.pageSize})}"><span th:text="${users.pages}"></span></a>
            </li>

            <!--   下一页 -->
            <li class="page-item" data-th-classappend="${users.isLastPage} ? 'disabled' : ''">
                <a th:if="${not users.isLastPage}" th:href="@{${'/user/page'}(pageNum=${users.pageNum+1},pageSize=${users.pageSize})}">»</a>
            </li>
            <span class="label label-default" th:text="${users.pages}">New</span>

            一共<span class="btn btn-default" th:text="${users.pages}"></span>页
        </ul>


    </div>

        <div th:replace="page::pageNav(${users},'←','→','page/user')"></div>
    </div>
</body>
</html>